        <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/VehicleManagement/css/admin.css">
<link rel="stylesheet" type="text/css" href="/VehicleManagement/css/admintwo.css">
<style type="text/css">
	.avatar{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 5px solid white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
       	margin: 50px auto 20px;
        display: block;
        
    }
        
    .card-body{
        text-align: center;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        margin: 0px 0px 30px 0px;
        
    }
    #card-body{
    	background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    #card-body p{
    	padding:12px 0px 12px 0px;
    }
    .user-name{
        ont-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 5px;
    }
    #h2{
    	padding:12px 0px 12px 0px;
    	text-align: center;
    }
    .user-title {
        color: #6c757d;
        margin-bottom: 20px;
    }
    .actionbtn{
    	padding: 12px 24px;
  		background: linear-gradient(135deg, #2196F3, #1976D2);
 		color: white;
  		border: none;
  		border-radius: 3px;
  		font-size: 16px;
  		cursor: pointer;
  		box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
  		transition: all 0.3s ease;
  		display: flex;
  		position: relative;
  		left: 545px;
    }
    .actionbtn:hover{
    	background: linear-gradient(135deg, #1976D2, #0D47A1);
  		box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
    }
    #divone{
    	padding:12px 0px 12px 0px;
    }
    .action-btns{
    	float: right;
		padding: 12px 24px;
  		background: linear-gradient(135deg, #2196F3, #1976D2);
 		color: white;
  		border: none;
  		border-radius: 8px;
  		font-size: 16px;
  		position: relative;
  		left: 420px;
	}
	.action-btns:hover{
		background: linear-gradient(135deg, #1976D2, #0D47A1);
  		box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
	}
	.close {
    	float: right;
    	cursor: pointer;
    	font-size: 24px;
	}
	input {
    	flex: 1;
    	padding: 8px;
    	border: 1px solid #ddd;
    	border-radius: 4px;
    	width: 300px;
    	margin: 10px;
	}
	h2 {
    	margin-top: 10px;
    	text-align: center;
    	clear: both;
	}
	form button{
    	width: 100px;
    	padding: 10px;
    	position: relative;
    	left:40%;
    	background-color: #4CAF50;
    	color: white;
    	border: none;
    	border-radius: 4px;
    	cursor: pointer;
    	margin-top: 10px;
    	text-align: center;
	}
	form button:hover {
    	background-color: #45a049;
	}
</style>
</head>
<body>
	<!-- 左侧导航栏 -->
    <div class="sidebar">
        <div class="logo">
            <h2>Vehicle<span>System</span></h2>
        </div>
        <div class="nav-menu">
            <div class="nav-item active" id="frontpage">
                <a class="nav-link">
                	<img alt="" src="/VehicleManagement/img/2.png">
                    <span>首页</span>
                </a>
            </div>
            <div class="nav-item" id="users">
                <a class="nav-link">
                	<img alt="" src="/VehicleManagement/img/8.png">
                    <span>客户管理</span>
                </a>
            </div>
            <div class="nav-item">
                <a class="nav-link" id="cars">
                	<img alt="" src="/VehicleManagement/img/4.png">
                    <span>车辆管理</span>
                </a>
            </div>
             <div class="nav-item">
                <a class="nav-link" id="carinfo">
                	<img alt="" src="/VehicleManagement/img/gm.png">
                    <span>购买管理</span>
                </a>
            </div>
            <div class="nav-item" id="orders">
                <a class="nav-link">
                	<img alt="" src="/VehicleManagement/img/5.png">
                    <span>订单管理</span>
                </a>
            </div>
            <div class="nav-item" id="news">
                <a class="nav-link">
                	<img alt="" src="/VehicleManagement/img/xw.png">
                    <span>新闻管理</span>
                </a>
            </div>
            <div class="nav-item" id="maintenance">
                <a class="nav-link">
                	<img alt="" src="/VehicleManagement/img/by.png">
                    <span>汽车保养</span>
                </a>
            </div>
            <div class="nav-item" id="comments">
                <a class="nav-link">
                	<img alt="" src="/VehicleManagement/img/pl.png">
                    <span>评论管理</span>
                </a>
            </div>
             <div class="nav-item" id="cardetails">
                <a class="nav-link">
                	<img alt="" src="/VehicleManagement/img/4.png">
                    <span>车辆详情</span>
                </a>
            </div>
            <div class="nav-item" id="carimg">
                <a class="nav-link">
                	<img alt="" src="/VehicleManagement/img/tp.png">
                    <span>图片详情</span>
                </a>
            </div>
            <div class="nav-item" id="mycar">
                <a class="nav-link">
                	<img alt="" src="/VehicleManagement/img/khqc.png">
                    <span>客户汽车</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <div class="header">
            <h2 id="page-title">汽车管理系统</h2>
            <div class="user-info">
                <div>
                    <div>管理员:admin</div>
                </div>
            </div>
        </div>
        
        <div>
            <!-- 加载动画 -->
            <div class="loader" id="loader">
                <div class="spinner"></div>
            </div>
            <!-- 动态内容区域 -->
            	<div class="content-area" id="content-area">
                	<!-- 初始内容由JavaScript填充 -->
            	</div>
            </div>
        </div>
    </div>
</body>
<script src="/VehicleManagement/js/jquery.js"></script>
<script src="/VehicleManagement/js/echarts.js"></script>
<script>
	let contentArea = document.getElementById('content-area');
	let loader = document.getElementById('loader');
	let pageTitle = document.getElementById('page-title');
	//页面加载完成后执行
	document.addEventListener('DOMContentLoaded', function() {
    // 初始加载首页
     frontpage();
    // 为所有导航项添加点击事件
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            // 更新导航激活状态
            navItems.forEach(i => i.classList.remove('active'));
            this.classList.add('active');
        	})
    	})
	});
	$("#frontpage").click(function(){
		$("#content-area").innerHTML = '';
		frontpage();
	});
	
	$("#users").click(function(){
		$("#content-area").innerHTML = '';
		users(1);
	});
	
	$("#cars").click(function(){
		$("#content-area").innerHTML = '';
		carsall(1);
	});
	
	$("#carinfo").click(function(){
		$("#content-area").innerHTML = '';
		carinfos(1);
	});
	
	$("#orders").click(function(){
		$("#content-area").innerHTML = '';
		Orders(1);
	});
	
	$("#news").click(function(){
		$("#content-area").innerHTML = '';
		newesall(1);
	});
	
	$("#maintenance").click(function(){
		$("#content-area").innerHTML = '';
		maintenance();
	});
	
	$("#comments").click(function(){
		$("#content-area").innerHTML = '';
		comments();
	});
	
	$("#cardetails").click(function(){
		$("#content-area").innerHTML = '';
		cardetails();
	});
	
	$("#carimg").click(function(){
		$("#content-area").innerHTML = '';
		carimg();
	});
	
	$("#mycar").click(function(){
		$("#content-area").innerHTML = '';
		mycar();
	});
	//首页
	function frontpage(){
		$("#content-area").empty();
		$.ajax({
			url:"frontpage.do",
			type:"GET",
			data:{
				
			},
			success:function(data){
				let orders = data.data.data;
				let order = data.data.totalRows;
				let userall = data.data.userall;
				let priceall = data.data.priceall;
					var dashboard=`
						<div class="stats-container">
		                    <div class="stat-card">
		                    <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe)">
		                    	<img alt="" src="/VehicleManagement/img/8.png">
		                    </div>
		                    <div class="stat-info">
		                        <h4>总用户数</h4>
		                        <div class="value">${"${userall}"}</div>
		                    </div>
		                </div>
		                <div class="stat-card">
		                    <div class="stat-icon" style="background: linear-gradient(135deg, #6a11cb, #2575fc)">   
		                    	<img alt="" src="/VehicleManagement/img/5.png">
		                    </div>
		                    <div class="stat-info">
		                        <h4>订单数量</h4>
		                        <div class="value">${"${order}"}</div>
		                    </div>
		                </div>
		                <div class="stat-card">
		                    <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c)">
		                    	<img alt="" src="/VehicleManagement/img/9.png">
		                    </div>
		                    <div class="stat-info">
		                        <h4>销售额</h4>
		                        <div class="value">${"${priceall}"}</div>
		                    </div>
		                </div>
		                <div class="stat-card">
		                    <div class="stat-icon" style="background: linear-gradient(135deg, #5ee7df, #b490ca)">
		                    <img alt="" src="/VehicleManagement/img/10.png">
		                    </div>
		                    <div class="stat-info">
		                        <h4>访问量</h4>
		                        <div class="value">10000</div>
		                    </div>
		                </div>
		                <div class="charts-container">
		                	<div id="main"></div>
		                	<div id="main_two"></div>
		                    </div>
		                </div>
		                <div class="table-container">
		           			<div class="card-header">
		           				<h3>最近订单</h3>
		           			</div>
		           			<table>
		           				<thead>
		           					<tr>
		           						<td>订单号</td>
		           						<td>客户</td>
		           						<td>车辆型号</td>
		           						<td>日期</td>
		           						<td>金额</td>
		           						<td>状态</td>
		           					</tr>
		           				</thead>
		           				<tbody id="tr">
		           					
		           				</tbody>
		           			</table>
		                </div>
		            </div>
		            `		
            $("#content-area").append(dashboard);
            for(let i = 0;i<orders.length;i++){
				let order = orders[i];
				let tr = `
					<tr>
						<td>${"${order.order_Id}"}</td>
						<td>${"${order.user_Id}"}</td>
						<td>${"${order.car_Id}"}</td>
						<td>${"${order.order_date}"}</td>
						<td>${"${order.purchase_price}"}</td>
						<td>${"${order.state}"}</td>
					</tr>
					`
					$("#tr").append(tr)
            };
             histogram_one();
             histogram();
			}
		})
	}
	function histogram_one(){
		$.ajax({
			url:"mainone.do",
			type:"GET",
			data:{	
			},
			success:function(data){
				let orderdata = data.data;
				let one = orderdata.onetotal;
				let two = orderdata.twototal;
				let three = orderdata.threetotal;
				let four = orderdata.fourtotal;
				let five = orderdata.fivetotal;
				let six = orderdata.sixtotal;
				let seven = orderdata.seventotal;
				let eight = orderdata.eighttotal;
				let nine = orderdata.ninetotal;
				let ten = orderdata.tentotal;
				let eleven = orderdata.eleventotal;
				let twelve = orderdata.twelvetotal;
				var chartDom = document.getElementById('main');
				var myChart = echarts.init(chartDom);
				var option;

				option = {
				  xAxis: {
				    type: 'category',
				    boundaryGap: false,
				    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
				  },
				  yAxis: {
				    type: 'value'
				  },
				  series: [
				    {
				      data: [one, two, three, four, five, six, seven,eight,nine,ten,eleven,twelve],
				      type: 'line',
				      areaStyle: {}
				    }
				  ]
				};

				option && myChart.setOption(option);
			}
		})
	}
	function histogram(){
		$.ajax({
			url:"maintwo.do",
			type:"GET",
			data:{
				
			},
			success:function(data){
				let cars = data.data;
				let carsjc = data.data.carsjc;
				let carspc = data.data.carspc;
				let carssuv = data.data.carssuv;
				let carsvxc = data.data.carsvxc;
				var chartDom = document.getElementById('main_two');
				var myChart = echarts.init(chartDom);
				var option;
				option = {
				  title: {
				    text: '车辆类型统计',
				    subtext: 'Vehicle type statistics',
				    left: 'center'
				  },
				  tooltip: {
				    trigger: 'item'
				  },
				  legend: {
				    orient: 'vertical',
				    left: 'left'
				  },
				  series: [
				    {
				      name: 'Access From',
				      type: 'pie',
				      radius: '50%',
				      data: [
				        { value: carsjc, name: '轿车' },
				        { value: carspc, name: '跑车' },
				        { value: carssuv, name: 'SUV' },
				      ],
				      emphasis: {
				        itemStyle: {
				          shadowBlur: 10,
				          shadowOffsetX: 0,
				          shadowColor: 'rgba(0, 0, 0, 0.5)'
				        }
				      }
				    }
				  ]
				};

				option && myChart.setOption(option);
			}
		})
	}
	//用户
	function users(pageNum=1){
		$("#content-area").empty();
		let pageSize=10;
		$.ajax({
			url:"user.do",
			type:"GET",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let users = data.data.data;
				currertaPage = data.data.pageNum;
				var table =`
					<div class="table-container">
           			<div class="card-header">
           				<h3>全部用户</h3>
           				<button class="action-btns" onclick="users(1)">刷新列表</button>
           				<button class="action-btn" onclick="adduser()">添加用户</button>
           			</div>
           			<table>
           				<thead>
           					<tr>
           						<td>用户Id</td>
           						<td>用户名字</td>
           						<td>用户密码</td>
           						<td>性别</td>
           						<td>真实姓名</td>
           						<td>邮箱</td>
           						<td>手机号</td>
           						<td>身份证号码</td>
           						<td>头像</td>
           						<td>操作</td>
           					</tr>
           				</thead>
           				<tbody id="tr">
           					
           				</tbody>
           			</table>
           			
           		</div>
           			<div id="pageBar">
           			</div>
           			<div id="myModal" class="modal">
   		  			
       				</div>
                </div>
            </div>
				`
			$("#content-area").append(table);
				for(let i = 0;i<users.length;i++){
					let user = users[i];
					let tr = `
						<tr>
							<td>${"${user.userId}"}</td>
							<td>${"${user.username}"}</td>
							<td>${"${user.password}"}</td>
							<td>${"${user.sex}"}</td>
							<td>${"${user.realname}"}</td>
							<td>${"${user.email}"}</td>
							<td>${"${user.telephone}"}</td>
							<td>${"${user.idNum}"}</td>
							<td><img src='${"${user.headimg}"}' class="headimgs"></td>
							<td>
								<a href='#' onclick='updateuserid(${"${user.userId}"})' id="revise">修改<a>
								<a href='#' onclick='deleteuser(${"${user.userId}"})' id="delete">删除<a>
							</td>
						</tr>
						`
					$("#tr").append(tr);
	            };	
	            userPageBar(data.data);
			}
		})
		
	}
	function updateuserid(userid){
		$("#myModal").empty();
		$.ajax({
			url:"selectuserid.do",
			type:"GET",
			data:{
				userid:userid
			},
			success:function(data){
				let user = data.data;
					let form=`
						<div class="modal-content">
	   		    		<span class="close" onclick="closeModal()">&times;</span>
	   		    		<h2>修改信息</h2><br><br>
	   		    		<!-- 表单内容 -->
	   		    		<form id="updateuserForm">
	   		    			<input type="text" name="userid" value=${"${user.userId}"} style="display:none">
	   		    			用户名字:<input type="text" name="username" value=${"${user.username}"}><br>
	   		    			用户密码:<input type="text" name="password" value=${"${user.password}"}><br>
	   		    			性别:<input type="text" name="sex" value=${"${user.sex}"}><br>
	   		    			真实姓名:<input type="text" name="realname" value=${"${user.realname}"}><br>
	   		    			邮箱:<input type="text" name="email" value=${"${user.email}"}><br>
	   		    			手机号:<input type="text" name="telephone" value=${"${user.telephone}"}><br>
	   		    			身份证号码:<input type="text" name="idNum" value=${"${user.idNum}"}><br>
	   		    			头像:<input type="file" id="headimg" name="headimg" value=${"${user.headimg}"}><br>
	   		    				<img src=${"${user.headimg}"} id="prewimage"><br>
	   		    				<input type="hidden" name="oldheadimg" value="${user.headimg}">
	   		    			<button type="button" onclick="updateusers()">
	   		    				修改
	   		    			</button>
	   		    		</form>
	   		  			</div>
					`
				$("#myModal").append(form);
			}
		})
		document.getElementById('myModal').style.display = 'block';
		// 图片预览功能
		$("#headimg").change(function() {
     	const file = this.files[0];
     	if (file) {
         	const reader = new FileReader();
         	reader.onload = function(e) {
             	$("#preview").attr("src", e.target.result).show();
         	}
         reader.readAsDataURL(file);
     	}
		})
	}
	function updateusers(){
		const form = document.getElementById('updateuserForm');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url:"updateusers.do",
            type:"POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
            	  
            }
        });
        closeModal();
	}
	function deleteuser(userid){
		$.ajax({
			url:"deleteuser.do",
			type:"GET",
			data:{
				userid:userid
			},
			success:function(data){
				if(data.code == 200){
					alert("删除成功");
				}
				if(data.code == 409){
					alert("删除失败");
				}
				users(1);
			}
			
		})
	}
	function adduser(){
		$("#myModal").empty();
		let form=`
			<div class="modal-content">
	    		<span class="close" onclick="closeModal()">&times;</span>
	    		<h2>添加用户</h2><br><br>
	    		<!-- 表单内容 -->
	            <form id="userForm">
	               	 用户名:<input type="text" name="username" placeholder="用户名"><br>
	               	 密码:<input type="password" name="password" placeholder="密码"><br>
					   性别:<select name="sex">
	                	<option value="男">男</option>
	                	<option value="女">女</option>
	                </select><br>
					真实姓名:<input type="text" name="realname" placeholder="真实姓名"><br>
					邮箱:<input type="email" name="email" placeholder="邮箱"><br>
					手机号:<input type="tel" name="telephone" placeholder="手机号"><br>
					身份证号:<input type="text" name="idNum" placeholder="身份证号"><br>
	               	头像:<input type="file" id="headimg" name="headimg"><br>
	                <img id="preview" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
	                <button type="button" onclick="submitUserForm()">添加</button>
	                <div id="result"></div>
	            </form>
	  			</div>
			`		
			$("#myModal").append(form);
		 	document.getElementById('myModal').style.display = 'block';
		 // 图片预览功能
		   $("#headimg").change(function() {
        	const file = this.files[0];
        	if (file) {
            	const reader = new FileReader();
            	reader.onload = function(e) {
                $("#preview").attr("src", e.target.result).show();
            };
            reader.readAsDataURL(file);
       		}
    		});
		    
	}
	function submitUserForm() {
		const form = document.getElementById('userForm');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url: "addUser.do",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
            	
            }
        });
        closeModal();
	}
	function userPageBar(page){
		let pageBar = $("#pageBar");
		let nagigatorNum = page.nagigatorNum;
		pageBar.empty();
		let first = "<a href='#' onclick='users(1)'>首页</a>"
		pageBar.append(first);
		if(page.hasPrev){
			pageBar.append("<a href='#' style='width:60px' onclick='users("+(currertaPage-1) +")'>上一页</a>");
		}
		for(let i = 0;i<nagigatorNum.length;i++){
			let num = nagigatorNum[i];
			if(num == page.pageNum){
				pageBar.append('<a href="#" onclick="users('+num+')">'+num+'</a>');
			}else{
				pageBar.append('<a href="#" onclick="users('+num+')">'+num+'</a>');
			}
		}
		if(page.hasNext){
			pageBar.append("<a href='#' style='width:60px' onclick='users("+(currertaPage+1) +")'>下一页</a>");
		}
		let lest = "<a href='#' onclick='users("+page.totalPages+")'>尾页</a>"
		pageBar.append(lest);
	};
	//车辆
	function carsall(pageNum=1){
		$("#content-area").empty();
		let pageSize=10;
		$.ajax({
			url:"carsselect",
			type:"GET",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let cars = data.data.data;
				currertaPage = data.data.pageNum;
				var table =`
					<div class="table-container">
           			<div class="card-header">
           				<h3>全部车辆</h3>
           				<button class="action-btns" onclick="carsall(1)">刷新列表</button>
           				<button class="action-btn" onclick="carsom()">添加车辆</button>
           			</div>
           			<table>
           				<thead>
           					<tr>
           						<td>Id</td>
           						<td>车辆名字</td>
           						<td>车辆图片</td>
           						<td>价格</td>
           						<td>收藏</td>
           						<td>简单介绍</td>
           						<td>类型</td>
           						<td>品牌</td>
           					</tr>
           				</thead>
           				<tbody id="tr">
           					
           				</tbody>
           			</table>
           			<div id="pageBar">
           			</div>
           			<div id="myModal" class="modal">
       		  			
       				</div>
                </div>
            </div>
            `
			$("#content-area").append(table);
				for(let i = 0;i<cars.length;i++){
					let car = cars[i];
					let tr = `
						<tr>
							<td>${"${car.carid}"}</td>
							<td>${"${car.carname}"}</td>
							<td><img src='${"${car.carimg}"}' class="headimgs"></td>
							<td>${"${car.price}"}</td>
							<td>${"${car.saleState}"}</td>
							<td>${"${car.introduce}"}</td>
							<td>${"${car.type}"}</td>
							<td>${"${car.brand}"}</td>
							<td>
								<a href='#' onclick='opencars(${"${car.carid}"})' id="revise">修改<a>
								<a href='#' onclick='deleteCars(${"${car.carid}"})' id="delete">删除<a>
							</td>
						</tr>
						`
					$("#tr").append(tr);
	            };	
	            carsPageBar(data.data);
			}
		})
	}
	
	function opencars(carsid){
		$("#myModal").empty();
		$.ajax({
			url:"selectcarid.do",
			type:"GET",
			data:{
				carsid:carsid
			},
			success:function(data){
				let cars = data.data;
					let form=`
						<div class="modal-content">
	   		    		<span class="close" onclick="closeModal()">&times;</span>
	   		    		<h2>修改信息</h2><br><br>
	   		    		<!-- 表单内容 -->
	   		    		<form id="carsform">
	   		    		<input type="text"  name="carid" value=${"${cars.carid}"} style="display:none">
   		    			车辆名字:<input type="text"  name="carname" value=${"${cars.carname}"}><br>
   		    			车辆价格:<input type="text"  name="carprice"value=${"${cars.price}"}><br>
   		    			收藏:<input type="text"  name="saleState"value=${"${cars.saleState}"}><br>
   		    			简单介绍:<input type="text"  name="introduce"value=${"${cars.introduce}"}><br>
   		    			车辆类型:<input type="text"  name="type"value=${"${cars.type}"}><br>
   		    			车辆品牌:<input type="text"  name="brand"value=${"${cars.brand}"}><br>
   		    			车辆图片:<input type="file"  id="carcover" name="carcover" value=${"${cars.carimg}"}><br>
   		    					<img src='${"${cars.carimg}"}' id="prewimage"><br>
   		    				<input type="hidden" name="oldcarsCover" value=${"${cars.carimg}"}>
   		    			<button type="button" onclick="updatacars()">修改</button>
	   		    		</form>
	   		  			</div>
					`
				$("#myModal").append(form);
			}
		})
		document.getElementById('myModal').style.display = 'block';
		// 图片预览功能
		$("#carcover").change(function() {
     	const file = this.files[0];
     	if (file) {
         	const reader = new FileReader();
         	reader.onload = function(e) {
             	$("#prewimage").attr("src", e.target.result).show();
         	}
         reader.readAsDataURL(file);
     	}
		})
	}
	function updatacars(){
		const form = document.getElementById('carsform');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url:"updatecars.do",
            type:"POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
            	  
            }
        });
        closeModal();
	}
	function carsom(){
		$("#myModal").empty();
		let form=`
			<div class="modal-content">
    		<span class="close" onclick="closeModal()">&times;</span>
    		<h2>修改信息</h2><br><br>
    		<!-- 表单内容 -->
    		<form id="carsForm">
				车辆名字:<input type="text" name="carname" ><br>
				车辆价格:<input type="text" name="carprice"><br>
				简单介绍:<input type="text" name="introduce"><br>
				车辆类型:<input type="text" name="type"><br>
				车辆品牌:<input type="text" name="brand"><br>
				车辆图片:<input type="file" name="carcover" id="carcover"><br>
	                <img id="preview" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
	            <button type="button" onclick="submitcarsForm()">添加</button>
	            <div id="result"></div>
	         </form>
	  			</div>
			`		
			$("#myModal").append(form);
		 	document.getElementById('myModal').style.display = 'block';
		 // 图片预览功能
		   $("#carcover").change(function() {
        	const file = this.files[0];
        	if (file) {
            	const reader = new FileReader();
            	reader.onload = function(e) {
                	$("#preview").attr("src", e.target.result).show();
            	};
            reader.readAsDataURL(file);
        	}
    	});
	}
	
	function submitcarsForm(){
		const form = document.getElementById('carsForm');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
        	url: "addcars.do",
        	type: "POST",
        	data: formData,
        	processData: false,
        	contentType: false,
        	success: function(data) {
           
        	}
   		})
        closeModal();
	}
	function deleteCars(carsid){
		$.ajax({
			url:"deletecars.do",
			type:"GET",
			data:{
				carsid:carsid
			},
			success:function(data){
				console.log(data)
				if(data.code == 200){
					alert("删除成功");
				}
				if(data.code == 409){
					alert("删除失败");
				}
				carsall(1);
			}
			
		})
	}
	//车辆分页导航
	function carsPageBar(page){
		let pageBar = $("#pageBar");
		let nagigatorNum = page.nagigatorNum;
		pageBar.empty();
		let first = "<a href='#' onclick='carsall(1)'>首页</a>"
		pageBar.append(first);
		if(page.hasPrev){
			pageBar.append("<a href='#' style='width:60px' onclick='carsall("+(currertaPage-1) +")'>上一页</a>");
		}
		for(let i = 0;i<nagigatorNum.length;i++){
			let num = nagigatorNum[i];
			if(num == page.pageNum){
				pageBar.append('<a href="#" onclick="carsall('+num+')">'+num+'</a>');
			}else{
				pageBar.append('<a href="#" onclick="carsall('+num+')">'+num+'</a>');
			}
		}
		if(page.hasNext){
			pageBar.append("<a href='#' style='width:60px' onclick='carsall("+(currertaPage+1) +")'>下一页</a>");
		}
		let lest = "<a href='#' onclick='carsall("+page.totalPages+")'>尾页</a>"
		pageBar.append(lest);
	};
	//购买管理
	function carinfos(pageNum=1){
		$("#content-area").empty();
		let pageSize=10;
		$.ajax({
			url:"carinfoall.do",
			type:"GET",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let carinfo = data.data.data;
				currertaPage = data.data.pageNum;
				var table =`
					<div class="table-container">
           			<div class="card-header">
           				<h3>全部购买</h3>
           				<button class="action-btns" onclick="carinfos(1)">刷新列表</button>
           				<button class="action-btn" onclick="addcarinfos()">添加车辆</button>
           			</div>
           			<table>
           				<thead>
           					<tr>
           						<td>id</td>
           						<td>车名</td>
           						<td>价格</td>
           						<td>颜色</td>
           						<td>内饰材质</td>
           						<td>配置</td>
           						<td>图片</td>
           						<td>产品介绍</td>
           						<td>性能</td>
           						<td>保障</td>
           						<td>内饰配件</td>
           						<td>智能设备</td>
           						<td>操作</td>
           					</tr>
           				</thead>
           				<tbody id="tr">
           					
           				</tbody>
           			</table>
           			<div id="pageBar">
           			</div>
           			<div id="myModal" class="modal">
       		  			
       				</div>
                </div>   
            </div>
				`
			$("#content-area").append(table);
				for(let i = 0;i<carinfo.length;i++){
					let car = carinfo[i];
					let tr = `
						<tr>
							<td>${"${car.carId}"}</td>
							<td>${"${car.carName}"}</td>
							<td>${"${car.price}"}</td>
							<td>${"${car.color}"}</td>
							<td>${"${car.interior_material}"}</td>
							<td>${"${car.configuration}"}</td>
							<td><img src='${"${car.carImg}"}' class="headimgs"></td>
							<td>${"${car.introduce}"}</td>
							<td>${"${car.performance}"}</td>
							<td>${"${car.guarantee}"}</td>
							<td>${"${car.interior_accessories}"}</td>
							<td>${"${car.smart_device}"}</td>
							<td>
								<a href='#' onclick='carinfoModal(${"${car.carId}"})' id="revise">修改<a>
								<a href='#' onclick='deletecarinfo(${"${car.carId}"})' id="delete">删除<a>
							</td>
						</tr>
						`
					$("#tr").append(tr);
	            };	
	            carinfoPageBar(data.data);
			}
		})
	}
	function deletecarinfo(carinfoid){
		$.ajax({
			url:"deletecarinfo.do",
			type:"GET",
			data:{
				carinfoid:carinfoid
			},
			success:function(data){
				if(data.code == 200){
					alert("删除成功");
				}
				if(data.code == 409){
					alert("删除失败");
				}
				carinfos(1);
			}
			
		})
	}
	function carinfoModal(carinfoid){
		$("#myModal").empty();
		$.ajax({
			url:"selectcarinfoid.do",
			type:"GET",
			data:{
				carinfoid:carinfoid
			},
			success:function(data){
				let cars = data.data;
					let form=`
						<div class="modal-content">
	   		    		<span class="close" onclick="closeModal()">&times;</span>
	   		    		<h2>修改信息</h2><br><br>
	   		    		<!-- 表单内容 -->
	   		    		<form id="carinfoform" enctype="multipart/form-data">
   		    			<input type="text" name="carid" value=${"${cars.carId}"} style="display:none">
   		    			车名:<input type="text" name="carname" value=${"${cars.carName}"}><br>
   		    			价格:<input type="text" name="price"value=${"${cars.price}"}><br>
   		    			颜色:<input type="text" name="color"value=${"${cars.color}"}><br>
   		    			内饰材质:<input type="text" name="material"value=${"${cars.interior_material}"}><br>
   		    			配置:<input type="text" name="configuration"value=${"${cars.configuration}"}><br>
   		    			产品介绍:<input type="text" name="introduce" value=${"${cars.introduce}"}><br>
   		    			性能:<input type="text" name="performance"value=${"${cars.performance}"}><br>
   		    			保障:	<input type="text" name="guarantee"value=${"${cars.guarantee}"}><br>
   		    			内饰配件:<input type="text" name="accessories"value=${"${cars.interior_accessories}"}><br>
   		    			智能设备<input type="text" name="smart"value=${"${cars.smart_device}"}><br>
   		    			图片:<input type="file" id="carImg" name="carImg"value=${"${cars.carImg}"}><br>
   		    				<img src='${"${cars.carImg}"}' id="prewimage"><br>
   		    				<input type="hidden" name="oldcarsCover" value=${"${cars.carImg}"}>
   		    			<button type="button" onclick="updatacarinfo()">修改</button>
   		    		</form>
	   		  			</div>
					`
				$("#myModal").append(form);
			}
		})
		document.getElementById('myModal').style.display = 'block';
		// 图片预览功能
		$("#carImg").change(function() {
     	const file = this.files[0];
     	if (file) {
         	const reader = new FileReader();
         	reader.onload = function(e) {
             	$("#prewimage").attr("src", e.target.result).show();
         	}
         reader.readAsDataURL(file);
     	}
		})
	}
	
	function updatacarinfo(){
		const form = document.getElementById('carinfoform');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url:"updatecarinfos",
            type:"POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
            	  
            }
        });
        closeModal();
	}
	
	function addcarinfos(){
		$("#myModal").empty();
		let form=`
			<div class="modal-content">
    		<span class="close" onclick="closeModal()">&times;</span>
    		<h2>修改信息</h2><br><br>
    		<!-- 表单内容 -->
    		<form id="addcarinfo">
			车名:<input type="text" name="carname"><br>
			价格:<input type="text" name="price"><br>
			颜色:<input type="text" name="color"><br>
			内饰材质:<input type="text" name="material"><br>
			配置:<input type="text" name="configuration"><br>
			产品介绍:<input type="text" name="introduce" ><br>
			性能:<input type="text" name="performance"><br>
			保障:	<input type="text" name="guarantee"><br>
			内饰配件:<input type="text" name="accessories"><br>
			智能设备<input type="text" name="smart"><br>
			图片:<input type="file" name="carImg" id="carImg"><br>
				<img id="preview" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
			<button type="button" onclick="addcarinfo()">添加</button>
		</form>
			</div>
			`		
			$("#myModal").append(form);
		 	document.getElementById('myModal').style.display = 'block';
		 // 图片预览功能
		   $("#carImg").change(function() {
        	const file = this.files[0];
        	if (file) {
            	const reader = new FileReader();
            	reader.onload = function(e) {
                	$("#preview").attr("src", e.target.result).show();
            	};
            reader.readAsDataURL(file);
        	}
    	});
	}
	function addcarinfo(){
		const form = document.getElementById('addcarinfo');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url: "addcatinfo.do",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
            	
            }
        });
        closeModal();
	}
	//购买分页导航
	function carinfoPageBar(page){
		let pageBar = $("#pageBar");
		let nagigatorNum = page.nagigatorNum;
		pageBar.empty();
		let first = "<a href='#' onclick='carinfos(1)'>首页</a>"
		pageBar.append(first);
		if(page.hasPrev){
			pageBar.append("<a href='#' style='width:60px' onclick='carinfos("+(currertaPage-1) +")'>上一页</a>");
		}
		for(let i = 0;i<nagigatorNum.length;i++){
			let num = nagigatorNum[i];
			if(num == page.pageNum){
				pageBar.append('<a href="#" onclick="carinfos('+num+')">'+num+'</a>');
			}else{
				pageBar.append('<a href="#" onclick="carinfos('+num+')">'+num+'</a>');
			}
		}
		if(page.hasNext){
			pageBar.append("<a href='#' style='width:60px' onclick='carinfos("+(currertaPage+1) +")'>下一页</a>");
		}
		let lest = "<a href='#' onclick='carinfos("+page.totalPages+")'>尾页</a>"
		pageBar.append(lest);
	};
	//订单
	function Orders(pageNum=1){
		$("#content-area").empty();
		let pageSize=10;
		$.ajax({
			url:"orders.do",
			type:"GET",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let orders = data.data.data;
				currertaPage = data.data.pageNum;
				var table =`
					<div class="table-container">
           			<div class="card-header">
           				<h3>全部订单</h3>
           				<button class="action-btn" onclick="Orders(1)">刷新列表</button>
           			</div>
           			<table>
           				<thead>
           					<tr>
           						<td>订单号</td>
           						<td>客户</td>
           						<td>车辆型号</td>
           						<td>日期</td>
           						<td>金额</td>
           						<td>状态</td>
           						<td>操作</td>
           					</tr>
           				</thead>
           				<tbody id="tr">
           					
           				</tbody>
           			</table>
           			<div id="pageBar">
           			</div>
           			<div id="myModal" class="modal">
       		  			
       				</div>
                </div>
            </div>
				`	
			$("#content-area").append(table);
				for(let i = 0;i<orders.length;i++){
					let order = orders[i];
					let tr = `
						<tr>
							<td>${"${order.order_Id}"}</td>
							<td>${"${order.user_Id}"}</td>
							<td>${"${order.car_Id}"}</td>
							<td>${"${order.order_date}"}</td>
							<td>${"${order.purchase_price}"}</td>
							<td>${"${order.state}"}</td>
							<td>
								<a href='#' onclick='openModal(${"${order.order_Id}"})' id="revise">修改<a>
								<a href='#' onclick='deleteorder(${"${order.order_Id}"})' id="delete">删除<a>
							</td>
						</tr>
						`
					$("#tr").append(tr);
	            };	
	            makePageBar(data.data);
			}
		})
	}
	
	function deleteorder(orderid){
		$.ajax({
			url:"deleteorder.do",
			type:"POST",
			data:{
				orderid:orderid
			},
			success:function(data){
				if(data.code == 200){
					alert("删除成功");
				}
				if(data.code == 409){
					alert("删除失败");
				}
				Orders(1);
			}
			
		})
	}
	
	function openModal(orderid) {
		$("#myModal").empty();
		$.ajax({
			url:"selectid.do",
			type:"GET",
			data:{
				orderid:orderid
			},
			success:function(data){
				let order = data.data;
					let form=`
						<div class="modal-content">
	   		    		<span class="close" onclick="closeModal()">&times;</span>
	   		    		<h2>修改信息</h2><br><br>
	   		    		<!-- 表单内容 -->
	   		    			<input type="text" id="orderid" value=${"${order.order_Id}"} style="display:none">
	   		    			客户:<input type="text" id="userid" value=${"${order.user_Id}"}><br><br>
	   		    			车辆型号:<input type="text" id="carid" value=${"${order.car_Id}"}><br><br>
	   		    			日期:<input type="date" id="date" value=${"${order.order_date}"}><br><br>
	   		    			金额:<input type="text" id="price" value=${"${order.purchase_price}"}><br><br>
	   		    			状态:<input type="text" id="state" value=${"${order.state}"}><br><br>
	   		    			<button onclick="updataorder()">
	   		    				修改
	   		    			</button>
	   		  			</div>
					`
				$("#myModal").append(form);
			}
		})
		document.getElementById('myModal').style.display = 'block';
	}

	function updataorder(){
		let orderid = $("#orderid").val();
		let userid = $("#userid").val();
		let carid = $("#carid").val();
		let date = $("#date").val();
		let price = $("#price").val();
		let state = $("#state").val();
		$.ajax({
			url:"updateOrders.do",
			type:"POST",
			data:{
				orderid:orderid,
				userid:userid,
				carid:carid,
				date:date,
				price:price,
				state:state
			},
			success:function(data){
				
			}
		});
		
		closeModal();
	}
	//订单分页导航
	function makePageBar(page){
		let pageBar = $("#pageBar");
		let nagigatorNum = page.nagigatorNum;
		pageBar.empty();
		let first = "<a href='#' onclick='Orders(1)'>首页</a>"
		pageBar.append(first);
		if(page.hasPrev){
			pageBar.append("<a href='#' style='width:60px' onclick='Orders("+(currertaPage-1) +")'>上一页</a>");
		}
		for(let i = 0;i<nagigatorNum.length;i++){
			let num = nagigatorNum[i];
			if(num == page.pageNum){
				pageBar.append('<a href="#" onclick="Orders('+num+')">'+num+'</a>');
			}else{
				pageBar.append('<a href="#" onclick="Orders('+num+')">'+num+'</a>');
			}
		}
		if(page.hasNext){
			pageBar.append("<a href='#' style='width:60px' onclick='Orders("+(currertaPage+1) +")'>下一页</a>");
		}
		let lest = "<a href='#' onclick='Orders("+page.totalPages+")'>尾页</a>"
		pageBar.append(lest);
	};
	
	//新闻管理
	function newesall(pageNum=1){
		$("#content-area").empty();
		let pageSize=10;
		$.ajax({
			url:"newsdo",
			type:"GET",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let news = data.data.data;
				currertaPage = data.data.pageNum;
				var table =`
					<div class="table-container">
           			<div class="card-header">
           				<h3>全部新闻</h3>
           				<button class="action-btns" onclick="newesall(1)">刷新列表</button>
           				<button class="action-btn" onclick="addnews()">添加新闻</button>
           			</div>
           			<table>
           				<thead>
           					<tr>
           						<td>id</td>
           						<td>新闻标题</td>
           						<td>新闻正文内容</td>
           						<td>发布日期</td>
           						<td>作者姓名</td>
           						<td>图片</td>
           						<td>操作</td>
           					</tr>
           				</thead>
           				<tbody id="tr">
           					
           				</tbody>
           			</table>
           			<div id="pageBar">
           			</div>
           			<div id="myModal" class="modal">
       		  			
       				</div>
                </div>   
            </div>
				`
			$("#content-area").append(table);
				for(let i = 0;i<news.length;i++){
					let newa = news[i];
					let tr = `
						<tr>
							<td>${"${newa.id}"}</td>
							<td>${"${newa.title}"}</td>
							<td>${"${newa.content}"}</td>
							<td>${"${newa.publishDate}"}</td>
							<td>${"${newa.author}"}</td>
							<td><img src='${"${newa.imageUrl}"}' class="headimgs"></td>
							<td>
								<a href='#' onclick='NewsModal(${"${newa.id}"})' id="revise">修改<a>
								<a href='#' onclick='deletnews(${"${newa.id}"})' id="delete">删除<a>
							</td>
						</tr>
						`
					$("#tr").append(tr);
	            };	
	            newsPageBar(data.data)
			}
		})
	}
	function deletnews(id){
		$.ajax({
			url:"deletenews.do",
			type:"POST",
			data:{
				id:id
			},
			success:function(data){
				if(data.code == 200){
					alert("删除成功");
				}
				if(data.code == 409){
					alert("删除失败");
				}
				newesall(1);
			}
			
		})
	}
	function NewsModal(id){
		$("#myModal").empty();
		$.ajax({
			url:"newsselectid.do",
			type:"GET",
			data:{
				id:id
			},
			success:function(data){
				let news = data.data;
					let form=`
						<div class="modal-content">
	   		    		<span class="close" onclick="closeModal()">&times;</span>
	   		    		<h2>修改信息</h2><br><br>
	   		    		<!-- 表单内容 -->
	   		    		<form id="newsform" enctype="multipart/form-data">
   		    			<input type="text" name="id" value=${"${news.id}"} style="display:none">
   		    			新闻标题:<input type="text" name="title" value=${"${news.title}"}><br>
   		    			新闻正文内容:	<input type="text" name="content"value=${"${news.content}"}><br>
   		    			发布日期:<input type="date" name="publishDate"value=${"${news.publishDate}"}><br>
   		    			作者姓名<input type="text" name="author"value=${"${news.author}"}><br>
   		    			图片:<input type="file" id="imageUrl" name="imageUrl"value=${"${news.imageUrl}"}><br>
   		    					<img src=${"${news.imageUrl}"} id="prewimage"><br>
   		    				<input type="hidden" name="oldnews" value=${"${news.imageUrl}"}>
   		    			<button type="button" onclick="updatanewsfo()">修改</button>
   		    		</form>
	   		  			</div>
					`
				$("#myModal").append(form);
			}
		})
		document.getElementById('myModal').style.display = 'block';
		// 图片预览功能
		$("#imageUrl").change(function() {
     	const file = this.files[0];
     	if (file) {
         	const reader = new FileReader();
         	reader.onload = function(e) {
             	$("#prewimage").attr("src", e.target.result).show();
         	}
         reader.readAsDataURL(file);
     	}
		})
	}
	
	function updatanewsfo(){
		const form = document.getElementById('newsform');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url:"updatenewsdo",
            type:"POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
            	  
            }
        });
        closeModal();
	}
	
	function addnews(){
		$("#myModal").empty();
		let form=`
			<div class="modal-content">
	    		<span class="close" onclick="closeModal()">&times;</span>
	    		<h2>修改信息</h2><br><br>
	    		<!-- 表单内容 -->
	    		<form id="addNewss" enctype="multipart/form-data">
   					新闻标题:<input type="text" name="title" ><br>
   					新闻正文内容:<input type="text" name="content"><br>
   					发布日期:<input type="date" name="publishDate"><br>
   					作者姓名<input type="text" name="author"><br>
   					图片:<input type="file" id="imageUrl" name="imageUrl"><br>
   					<img id="preview" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
   					<button type="button" onclick="addNewss()">添加</button>
   				</form>
	  		</div>
		`
			$("#myModal").append(form);
		 	document.getElementById('myModal').style.display = 'block';
		 // 图片预览功能
		   $("#imageUrl").change(function() {
        	const file = this.files[0];
        	if (file) {
            	const reader = new FileReader();
            	reader.onload = function(e) {
                	$("#preview").attr("src", e.target.result).show();
            	};
            reader.readAsDataURL(file);
        	}
    	});
	}
	function addNewss(){
		const form = document.getElementById('addNewss');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url:"addNews.do",
            type:"POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
            	  
            }
        });
        closeModal();
	}
	//新闻分页导航
	function newsPageBar(page){
		let pageBar = $("#pageBar");
		let nagigatorNum = page.nagigatorNum;
		pageBar.empty();
		let first = "<a href='#' onclick='newesall(1)'>首页</a>"
		pageBar.append(first);
		if(page.hasPrev){
			pageBar.append("<a href='#' style='width:60px' onclick='newesall("+(currertaPage-1) +")'>上一页</a>");
		}
		for(let i = 0;i<nagigatorNum.length;i++){
			let num = nagigatorNum[i];
			if(num == page.pageNum){
				pageBar.append('<a href="#" onclick="newesall('+num+')">'+num+'</a>');
			}else{
				pageBar.append('<a href="#" onclick="newesall('+num+')">'+num+'</a>');
			}
		}
		if(page.hasNext){
			pageBar.append("<a href='#' style='width:60px' onclick='newesall("+(currertaPage+1) +")'>下一页</a>");
		}
		let lest = "<a href='#' onclick='newesall("+page.totalPages+")'>尾页</a>"
		pageBar.append(lest);
	};
	//评论管理
	function maintenance(pageNum=1){
		$("#content-area").empty();
		let pageSize=10;
		$.ajax({
			url:"upkeep.do",
			type:"GET",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let upkeep = data.data.data;
				currertaPage = data.data.pageNum;
				var table =`
					<div class="table-container">
           			<div class="card-header">
           				<h3>保养项目</h3>
           				<button class="action-btns" onclick="maintenance(1)">刷新列表</button>
           				<button class="action-btn" onclick="addupkeeps()">添加保养</button>
           			</div>
           			<table>
           				<thead>
           					<tr>
           						<td>id</td>
           						<td>用户id</td>
           						<td>车辆id</td>
           						<td>保养选择</td>
           						<td>保养内容</td>
           						<td>保养状态</td>
           						<td>价格</td>
           						<td>开始时间</td>
           						<td>结束时间</td>
           						<td>操作</td>
           					</tr>
           				</thead>
           				<tbody id="tr">
           					
           				</tbody>
           			</table>
           			<div id="pageBar">
           			</div>
           			<div id="myModal" class="modal">
       		  			
       				</div>
                </div>   
            </div>
				`
			$("#content-area").append(table);
				for(let i = 0;i<upkeep.length;i++){
					let up = upkeep[i];   
					let tr = `
						<tr>
						<td>${"${up.upkeepsId}"}</td>
						<td>${"${up.user_id}"}</td>
						<td>${"${up.car_id}"}</td>
						<td>${"${up.upkeepname}"}</td>
						<td>${"${up.introduce}"}</td>
						<td>${"${up.state}"}</td>
						<td>${"${up.price}"}</td>
						<td>${"${up.created_at}"}</td>
						<td>${"${up.updated_at}"}</td>
						<td>
							<a href='#' onclick='upkeepModal(${"${up.upkeepsId}"})' id="revise">修改<a>
							<a href='#' onclick='deletupkeeps(${"${up.upkeepsId}"})' id="delete">删除<a>
						</td>
						</tr>
						`
					$("#tr").append(tr);
	            };	
	            maintenancePageBar(data.data)
			}
		})
	}
	function deletupkeeps(upkeepid){
		$.ajax({
			url:"upkeepdelect.do",
			type:"GET",
			data:{
				upkeepid:upkeepid
			},
			success:function(data){
				if(data.code == 200){
					alert("删除成功");
				}
				if(data.code == 409){
					alert("删除失败");
				}
				maintenance(1);
			}
			
		})
	}
	function upkeepModal(upkeepid){
		$("#myModal").empty();
		$.ajax({
			url:"upkeepselectiddo",
			type:"GET",
			data:{
				upkeepid:upkeepid
			},
			success:function(data){
				let upkeep = data.data;
					let form=`
						<div class="modal-content">
	   		    		<span class="close" onclick="closeModal()">&times;</span>
	   		    		<h2>修改信息</h2><br><br>
	   		    		<!-- 表单内容 -->
   		    				<input type="text" id="upkeepsId" value=${"${upkeep.upkeepsId}"} style="display:none">
   		    				用户id:<input type="text" id="user_id" value=${"${upkeep.user_id}"}><br>
   		    				车辆id:<input type="text" id="car_id" value=${"${upkeep.car_id}"}><br>
   		    				保养选择:<input type="text" id="upkeepname" value=${"${upkeep.upkeepname}"}><br>
   		    				保养内容:<input type="text" id="introduce"value=${"${upkeep.introduce}"}><br>
   		    				价格:<input type="text" id="price" value=${"${upkeep.price}"}><br>
   		    				保养状态:<input type="text" id="state" value=${"${upkeep.state}"}><br>
   		    				开始时间:<input type="date" id="created_at" value=${"${upkeep.created_at}"}><br>
   		    				结束时间:<input type="date" id="updated_at" value=${"${upkeep.updated_at}"}><br>
   		    				<button type="button" onclick="updataUpkeep()">修改</button>
	   		  			</div>
					`
				$("#myModal").append(form);
			}
		})
		document.getElementById('myModal').style.display = 'block';
	}
	function updataUpkeep(){
		let upkeepsId = $("#upkeepsId").val();
		let userid = $("#user_id").val();
		let carid = $("#car_id").val();
		let upkeepname = $("#upkeepname").val();
		let introduce = $("#introduce").val();
		let state = $("#state").val()
		let price = $("#price").val()
		let createdat = $("#created_at").val()
		let updatedat = $("#updated_at").val()
		$.ajax({
			url:"updateUpkeep.do",
			type:"POST",
			data:{
				upkeepsId:upkeepsId,
				userid:userid,
				carid:carid,
				upkeepname:upkeepname,
				introduce:introduce,
				state:state,
				price:price,
				createdat:createdat,
				updatedat,updatedat
			},
			success:function(data){
				
			}
		})
		closeModal();
	}
	function addupkeeps(){
		$("#myModal").empty();
		let form=`
			<div class="modal-content">
	    		<span class="close" onclick="closeModal()">&times;</span>
	    		<h2>修改信息</h2><br><br>
	    		<!-- 表单内容 -->
   				用户id:<input type="text" id="user_id" ><br>
   				车辆id:<input type="text" id="car_id" ><br>
   				保养选择:<input type="text" id="upkeepname" ><br>
   				保养内容:<input type="text" id="introduce" ><br>
   				价格:<input type="text" id="price" ><br>
   				保养状态:<input type="text" id="state" ><br>
   				开始时间:<input type="date" id="created_at" ><br>
   				结束时间:<input type="date" id="updated_at" ><br>
   				<button type="button" onclick="addupkeepall()">添加</button>
	  			</div>
		`
		$("#myModal").append(form);
		document.getElementById('myModal').style.display = 'block';
	}
	function addupkeepall(){
		let userid = $("#user_id").val();
		let carid = $("#car_id").val();
		let upkeepname = $("#upkeepname").val();
		let introduce = $("#introduce").val();
		let state = $("#state").val()
		let price = $("#price").val()
		let createdat = $("#created_at").val()
		let updatedat = $("#updated_at").val()
		$.ajax({
			url:"addupkeeps.do",
			type:"POST",
			data:{
				userid:userid,
				carid:carid,
				upkeepname:upkeepname,
				introduce:introduce,
				state:state,
				price:price,
				createdat:createdat,
				updatedat,updatedat
			},
			success:function(data){
				
			}
		})
		closeModal();
	}
	//保养项目分页导航
	function maintenancePageBar(page){
		let pageBar = $("#pageBar");
		let nagigatorNum = page.nagigatorNum;
		pageBar.empty();
		let first = "<a href='#' onclick='maintenance(1)'>首页</a>"
		pageBar.append(first);
		if(page.hasPrev){
			pageBar.append("<a href='#' style='width:60px' onclick='maintenance("+(currertaPage-1) +")'>上一页</a>");
		}
		for(let i = 0;i<nagigatorNum.length;i++){
			let num = nagigatorNum[i];
			if(num == page.pageNum){
				pageBar.append('<a href="#" onclick="maintenance('+num+')">'+num+'</a>');
			}else{
				pageBar.append('<a href="#" onclick="maintenance('+num+')">'+num+'</a>');
			}
		}
		if(page.hasNext){
			pageBar.append("<a href='#' style='width:60px' onclick='maintenance("+(currertaPage+1) +")'>下一页</a>");
		}
		let lest = "<a href='#' onclick='maintenance("+page.totalPages+")'>尾页</a>"
		pageBar.append(lest);
	};
	//评论管理
	function comments(pageNum=1){
		$("#content-area").empty();
		let pageSize=10;
		$.ajax({
			url:"commentsAll.do",
			type:"GET",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let comments = data.data.data;
				currertaPage = data.data.pageNum;
				var table =`
					<div class="table-container">
           			<div class="card-header">
           				<h3>全部评论</h3>
           				<button class="action-btns" onclick="comments(1)">刷新列表</button>
           				<button class="action-btn" onclick="addcomments()">添加评论</button>
           			</div>
           			<table>
           				<thead>
           					<tr>
           						<td>评论id</td>
           						<td>用户id</td>
           						<td>车辆id</td>
           						<td>评论内容</td>
           						<td>评论时间</td>
           						<td>操作</td>
           					</tr>
           				</thead>
           				<tbody id="tr">
           					
           				</tbody>
           			</table>
           			<div id="pageBar">
           			</div>
           			<div id="myModal" class="modal">
       		  			
       				</div>
                </div>   
            </div>
				`
			$("#content-area").append(table);
				for(let i = 0;i<comments.length;i++){
					let comment = comments[i];   
					let tr = `
						<tr>
						<td>${"${comment.commentid}"}</td>
						<td>${"${comment.userid}"}</td>
						<td>${"${comment.carid}"}</td>
						<td>${"${comment.commentString}"}</td>
						<td>${"${comment.commetnTime}"}</td>
						<td>
							<a href='#' onclick='commentModal(${"${comment.commentid}"})' id="revise">修改<a>
							<a href='#' onclick='deletcomment(${"${comment.commentid}"})' id="delete">删除<a>
						</td>
						</tr>
						`
					$("#tr").append(tr);
	            };	
	            commentPageBar(data.data)
			}
		})
	}
	function deletcomment(commentid){
		$.ajax({
			url:"commentdelect.do",
			type:"GET",
			data:{
				commentid:commentid
			},
			success:function(data){
				if(data.code == 200){
					alert("删除成功");
				}
				if(data.code == 409){
					alert("删除失败");
				}
				maintenance(1);
			}
			
		})
	}
	function commentModal(commentid){
		$("#myModal").empty();
		$.ajax({
			url:"commentselectiddo",
			type:"GET",
			data:{
				commentid:commentid
			},
			success:function(data){
				let comment = data.data;
					let form=`
						<div class="modal-content">
	   		    		<span class="close" onclick="closeModal()">&times;</span>
	   		    		<h2>修改信息</h2><br><br>
	   		    		<!-- 表单内容 -->
   		    				<input type="text" id="commentid" value=${"${comment.commentid}"} style="display:none">
   		    				用户id:<input type="text" id="userid" value=${"${comment.userid}"}><br>
   		    				车辆id:<input type="text" id="carid" value=${"${comment.carid}"}><br>
   		    				评论内容:<input type="text" id="commentidStrign" value=${"${comment.commentString}"}><br>
   		    				评论时间:<input type="date" id="commentidTime"value=${"${comment.commetnTime}"}><br>
   		    				<button type="button" onclick="updatacomment()">修改</button>
	   		  			</div>
					`
				$("#myModal").append(form);
			}
		})
		document.getElementById('myModal').style.display = 'block';
	}
	function updatacomment(){
		let commentid = $("#commentid").val();
		let userid = $("#userid").val();
		let carid = $("#carid").val();
		let commentidStrign = $("#commentidStrign").val();
		let commentidTime = $("#commentidTime").val();
		$.ajax({
			url:"updatecomment.do",
			type:"POST",
			data:{
				commentid:commentid,
				userid:userid,
				carid:carid,
				commentidStrign:commentidStrign,
				commentidTime:commentidTime,
			},
			success:function(data){
				
			}
		})
		closeModal();
	}
	function addcomments(){
		$("#myModal").empty();
		let form=`
			<div class="modal-content">
	    		<span class="close" onclick="closeModal()">&times;</span>
	    		<h2>修改信息</h2><br><br>
	    		<!-- 表单内容 -->
	    		用户id:<input type="text" id="userid" ><br>
   				车辆id:<input type="text" id="carid"><br>
   				评论内容:<input type="text" id="commentidStrign" }><br>
   				评论时间:<input type="date" id="commentidTime"}><br>
   				<button type="button" onclick="addcomment()">添加</button>
	  			</div>
		`
		$("#myModal").append(form);
		document.getElementById('myModal').style.display = 'block';
	}
	function addcomment(){
		let userid = $("#userid").val();
		let carid = $("#carid").val();
		let commentidStrign = $("#commentidStrign").val();
		let commentidTime = $("#commentidTime").val();
		$.ajax({
			url:"addcomment.do",
			type:"POST",
			data:{
				userid:userid,
				carid:carid,
				commentidStrign:commentidStrign,
				commentidTime:commentidTime,
			},
			success:function(data){
				
			}
		})
		closeModal();
	}
	//评论分页导航
	function commentPageBar(page){
		let pageBar = $("#pageBar");
		let nagigatorNum = page.nagigatorNum;
		pageBar.empty();
		let first = "<a href='#' onclick='comments(1)'>首页</a>"
		pageBar.append(first);
		if(page.hasPrev){
			pageBar.append("<a href='#' style='width:60px' onclick='comments("+(currertaPage-1) +")'>上一页</a>");
		}
		for(let i = 0;i<nagigatorNum.length;i++){
			let num = nagigatorNum[i];
			if(num == page.pageNum){
				pageBar.append('<a href="#" onclick="comments('+num+')">'+num+'</a>');
			}else{
				pageBar.append('<a href="#" onclick="comments('+num+')">'+num+'</a>');
			}
		}
		if(page.hasNext){
			pageBar.append("<a href='#' style='width:60px' onclick='comments("+(currertaPage+1) +")'>下一页</a>");
		}
		let lest = "<a href='#' onclick='comments("+page.totalPages+")'>尾页</a>"
		pageBar.append(lest);
	};
	//车辆详情
	function cardetails(pageNum=1){
		$("#content-area").empty();
		let pageSize=10;
		$.ajax({
			url:"cardetailsAll.do",
			type:"GET",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let cardetails = data.data.data;
				currertaPage = data.data.pageNum;
				var table =`
					<div class="table-container">
           			<div class="card-header">
           				<h3>车辆详情</h3>
           				<button class="action-btns" onclick="cardetails(1)">刷新列表</button>
           				<button class="action-btn" onclick="addcardetails()">添加详情</button>
           			</div>
           			<table>
           				<thead>
           					<tr>
           						<td>id</td>
           						<td>车辆id</td>
           						<td>详情内容</td>
           						<td>发动机</td>
           						<td>最大功率</td>
           						<td>峰值扭矩</td>
           						<td>加速</td>
           						<td>驱动方式</td>
           						<td>最高时速</td>
           						<td>操作</td>
           					</tr>
           				</thead>
           				<tbody id="tr">
           					
           				</tbody>
           			</table>
           			<div id="pageBar">
           			</div>
           			<div id="myModal" class="modal">
       		  			
       				</div>
                </div>   
            </div>
				`
			$("#content-area").append(table);
				for(let i = 0;i<cardetails.length;i++){
					let cardetail = cardetails[i];   
					let tr = `
						<tr>
						<td>${"${cardetail.cardetailsId}"}</td>
						<td>${"${cardetail.carid}"}</td>
						<td>${"${cardetail.introduce}"}</td>
						<td>${"${cardetail.engine}"}</td>
						<td>${"${cardetail.carkw}"}</td>
						<td>${"${cardetail.torque}"}</td>
						<td>${"${cardetail.accel}"}</td>
						<td>${"${cardetail.drivingmode}"}</td>
						<td>${"${cardetail.mph}"}</td>
						<td>
							<a href='#' onclick='cardetailModal(${"${cardetail.cardetailsId}"})' id="revise">修改<a>
							<a href='#' onclick='deletcardetail(${"${cardetail.cardetailsId}"})' id="delete">删除<a>
						</td>
						</tr>
						`
					$("#tr").append(tr);
	            };	
	            cardetailsPageBar(data.data)
			}
		})
	}
	function deletcardetail(id){
		$.ajax({
			url:"cardetaildelect.do",
			type:"GET",
			data:{
				id:id
			},
			success:function(data){
				if(data.code == 200){
					alert("删除成功");
				}
				if(data.code == 409){
					alert("删除失败");
				}
				cardetails(1);
			}
			
		})
	}
	function cardetailModal(id){
		$("#myModal").empty();
		$.ajax({
			url:"cardetailselectiddo",
			type:"GET",
			data:{
				id:id
			},
			success:function(data){
				let cardetail = data.data;
					let form=`
						<div class="modal-content">
	   		    		<span class="close" onclick="closeModal()">&times;</span>
	   		    		<h2>修改信息</h2><br><br>
	   		    		<!-- 表单内容 -->
   		    				<input type="text" id="id" value=${"${cardetail.cardetailsId}"} style="display:none">
   		    				车辆id:<input type="text" id="carid" value=${"${cardetail.carid}"}><br>
   		    				详情内容:<br>
   		    				<textarea id="introduce" rows="5" cols="50" >${"${cardetail.introduce}"}</textarea><br>
   		    				发动机:<input type="text" id="engine" value=${"${cardetail.engine}"}><br>
   		    				最大功率:<input type="text" id="carkw"value=${"${cardetail.carkw}"}><br>
   		    				峰值扭矩:<input type="text" id="torque"value=${"${cardetail.torque}"}><br>
   		    				加速:<input type="text" id="accel"value=${"${cardetail.accel}"}><br>
   		    				驱动方式:<input type="text" id="drivingmode"value=${"${cardetail.drivingmode}"}><br>
   		    				最高时速:<input type="text" id="mph"value=${"${cardetail.mph}"}><br>
   		    				<button type="button" onclick="updatacardetail()">修改</button>
	   		  			</div>
					`
				$("#myModal").append(form);
			}
		})
		document.getElementById('myModal').style.display = 'block';
	}
	function updatacardetail(){
		let id = $("#id").val();
		let carid = $("#carid").val();
		let introduce = $("#introduce").val();
		let engine = $("#engine").val();
		let carkw = $("#carkw").val();
		let torque = $("#torque").val();
		let accel = $("#accel").val();
		let drivingmode = $("#drivingmode").val();
		let mph = $("#mph").val();
		$.ajax({
			url:"updatecardetail.do",
			type:"POST",
			data:{
				id:id,
				carid:carid,
				introduce:introduce,
				engine:engine,
				carkw:carkw,
				torque:torque,
				accel:accel,
				drivingmode:drivingmode,
				mph:mph
			},
			success:function(data){
				
			}
		})
		closeModal();
	}
	function addcardetails(){
		$("#myModal").empty();
		let form=`
			<div class="modal-content">
	    		<span class="close" onclick="closeModal()">&times;</span>
	    		<h2>修改信息</h2><br><br>
	    		<!-- 表单内容 -->
   					车辆id:<input type="text" id="carid"}><br>
   					详情内容:<br>
   					<textarea id="introduce" rows="5" cols="50" ></textarea><br>
   					发动机:<input type="text" id="engine" }><br>
   					最大功率:<input type="text" id="carkw"><br>
   					峰值扭矩:<input type="text" id="torque"}><br>
   					加速:<input type="text" id="accel"><br>
   					驱动方式:<input type="text" id="drivingmode"><br>
   					最高时速:<input type="text" id="mph"><br>
   				<button type="button" onclick="addcardetailss()">添加</button>
	  			</div>
		`
		$("#myModal").append(form);
		document.getElementById('myModal').style.display = 'block';
	}
	function addcardetailss(){
		let carid = $("#carid").val();
		let introduce = $("#introduce").val();
		let engine = $("#engine").val();
		let carkw = $("#carkw").val();
		let torque = $("#torque").val();
		let accel = $("#accel").val();
		let drivingmode = $("#drivingmode").val();
		let mph = $("#mph").val();
		$.ajax({
			url:"addcardetailss.do",
			type:"POST",
			data:{
				carid:carid,
				introduce:introduce,
				engine:engine,
				carkw:carkw,
				torque:torque,
				accel:accel,
				drivingmode:drivingmode,
				mph:mph,
			},
			success:function(data){
				
			}
		})
		closeModal();
	}
	//车辆详情分页导航
	function cardetailsPageBar(page){
		let pageBar = $("#pageBar");
		let nagigatorNum = page.nagigatorNum;
		pageBar.empty();
		let first = "<a href='#' onclick='cardetails(1)'>首页</a>"
		pageBar.append(first);
		if(page.hasPrev){
			pageBar.append("<a href='#' style='width:60px' onclick='cardetails("+(currertaPage-1) +")'>上一页</a>");
		}
		for(let i = 0;i<nagigatorNum.length;i++){
			let num = nagigatorNum[i];
			if(num == page.pageNum){
				pageBar.append('<a href="#" onclick="cardetails('+num+')">'+num+'</a>');
			}else{
				pageBar.append('<a href="#" onclick="cardetails('+num+')">'+num+'</a>');
			}
		}
		if(page.hasNext){
			pageBar.append("<a href='#' style='width:60px' onclick='cardetails("+(currertaPage+1) +")'>下一页</a>");
		}
		let lest = "<a href='#' onclick='cardetails("+page.totalPages+")'>尾页</a>"
		pageBar.append(lest);
	};
	//图片详情
	function carimg(pageNum=1){
		$("#content-area").empty();
		let pageSize=10;
		$.ajax({
			url:"carimgAll.do",
			type:"GET",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let carimgs = data.data.data;
				currertaPage = data.data.pageNum;
				var table =`
					<div class="table-container">
           			<div class="card-header">
           				<h3>全部图片</h3>
           				<button class="action-btns" onclick="carimg(1)">刷新列表</button>
           				<button class="action-btn" onclick="addcarimg()">添加图片</button>
           			</div>
           			<table>
           				<thead>
           					<tr>
           						<td>id</td>
           						<td>车辆id</td>
           						<td>主图</td>
           						<td>中控</td>
           						<td>侧身图</td>
           						<td>空调图</td>
           						<td>时速图</td>
           						<td>音响图</td>
           						<td>座椅图</td>
           						<td>天花板图</td>
           						<td>操作</td>
           					</tr>
           				</thead>
           				<tbody id="tr">
           					
           				</tbody>
           			</table>
           			<div id="pageBar">
           			</div>
           			<div id="myModal" class="modal">
       		  			
       				</div>
                </div>   
            </div>
				`
			$("#content-area").append(table);
				for(let i = 0;i<carimgs.length;i++){
					let img = carimgs[i];   
					let tr = `
						<tr>
						<td>${"${img.carimgid}"}</td>
						<td>${"${img.carid}"}</td>
						<td><img src='${"${img.carimgkv}"}' class="headimgs"></td>
						<td><img src='${"${img.carimgivi}"}' class="headimgs"></td>
						<td><img src='${"${img.frontFender}"}' class="headimgs"></td>
						<td><img src='${"${img.carImgAc}"}' class="headimgs"></td>
						<td><img src='${"${img.carImgMph}"}' class="headimgs"></td>
						<td><img src='${"${img.carImgAudio}"}' class="headimgs"></td>
						<td><img src='${"${img.carImgSeat}"}' class="headimgs"></td>
						<td><img src='${"${img.carImgSunroof}"}' class="headimgs"></td>
						<td>
							<a href='#' onclick='carimgModal(${"${img.carimgid}"})' id="revise">修改<a>
							<a href='#' onclick='deletcarimg(${"${img.carimgid}"})' id="delete">删除<a>
						</td>
						</tr>
						`
					$("#tr").append(tr);
	            };	
	            carimgPageBar(data.data)
			}
		})
	}
	function deletcarimg(id){
		$.ajax({
			url:"carimgdelect.do",
			type:"GET",
			data:{
				id:id
			},
			success:function(data){
				if(data.code == 200){
					alert("删除成功");
				}
				if(data.code == 409){
					alert("删除失败");
				}
				carimg(1);
			}
			
		})
	}
	function carimgModal(id){
		$("#myModal").empty();
		$.ajax({
			url:"carimgselectiddo",
			type:"GET",
			data:{
				id:id
			},
			success:function(data){
				let carimg = data.data;
					let form=`
						<div class="modal-content">
	   		    		<span class="close" onclick="closeModal()">&times;</span>
	   		    		<h2>修改信息</h2><br><br>
	   		    		<!-- 表单内容 -->
	   		    		<form id="carimgform" enctype="multipart/form-data">
   		    				<input type="text" name="id" value=${"${carimg.carimgid}"} style="display:none">
   		    				车辆id:<input type="text" name="carid" value=${"${carimg.carid}"}><br>
   		    				主图:<input type="file" name="carImgKV" value=${"${carimg.carimgkv}"}><br>
   		    					<img src='${"${carimg.carimgkv}"}' class="headimgs"><br>
   		    				中控:<input type="file" name="carImgIVI" value=${"${carimg.carimgivi}"}><br>
   		    					<img src='${"${carimg.carimgivi}"}' class="headimgs"><br>
   		    				侧身图:<input type="file" name="frontFender"value=${"${carimg.frontFender}"}><br>
   		    					<img src='${"${carimg.frontFender}"}' class="headimgs"><br>
   		    				空调图:<input type="file" name="carImgAc"value=${"${carimg.carImgAc}"}><br>
   		    					<img src='${"${carimg.carImgAc}"}' class="headimgs"><br>
   		    				时速图:<input type="file" name="carImgMph"value=${"${carimg.carImgMph}"}><br>
   		    					<img src='${"${carimg.carImgMph}"}' class="headimgs"><br>
   		    				音响图:<input type="file" name="carImgAudio"value=${"${carimg.carImgAudio}"}><br>
   		    					<img src='${"${carimg.carImgAudio}"}' class="headimgs"><br>
   		    				座椅图:<input type="file" name="carImgSeat"value=${"${carimg.carImgSeat}"}><br>
   		    					<img src='${"${carimg.carImgSeat}"}' class="headimgs"><br>
   		    				天花板图:<input type="file" name="carImgSunroof"value=${"${carimg.carImgSunroof}"}><br>
   		    					<img src='${"${carimg.carImgSunroof}"}' class="headimgs"><br>
   		    				<button type="button" onclick="updatacarimg()">修改</button>
   		    			</form>
	   		  			</div>
					`
				$("#myModal").append(form);
			}
		})
		document.getElementById('myModal').style.display = 'block';
		
	}
	function updatacarimg(){
		const form = document.getElementById('carimgform');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url:"updatecarimgform.do",
            type:"POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
            	  
            }
        });
        closeModal();
	}
	function addcarimg(){
		$("#myModal").empty();
		let form=`
			<div class="modal-content">
	    		<span class="close" onclick="closeModal()">&times;</span>
	    		<h2>修改信息</h2><br><br>
	    		<!-- 表单内容 -->
	    		<form id="carimgsform" enctype="multipart/form-data">
   				车辆id:<input type="text" name="carid" ><br>
   				主图:<input type="file" id="carImgKV" name="carImgKV" ><br>
   				<img id="preview" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
   				中控:<input type="file" id="carImgIVI" name="carImgIVI"><br>
   				<img id="preview1" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
   				侧身图:<input type="file" id="frontFender" name="frontFender"><br>
   				<img id="preview2" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
   				空调图:<input type="file" id="carImgAc" name="carImgAc"><br>
   				<img id="preview3" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
   				时速图:<input type="file" id="carImgMph" name="carImgMph"><br>
   				<img id="preview4" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
   				音响图:<input type="file" id="carImgAudio" name="carImgAudio"><br>
   				<img id="preview5" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
   				座椅图:<input type="file" id="carImgSeat" name="carImgSeat"><br>
   				<img id="preview6" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
   				天花板图:<input type="file" id="carImgSunroof" name="carImgSunroof"><br>
   				<img id="preview7" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
   				<button type="button" onclick="addcarimgs()">添加</button>
   			</form>
	  		</div>
		`
		$("#myModal").append(form);
		document.getElementById('myModal').style.display = 'block';
		 $("#carImgKV").change(function() {
	        const file = this.files[0];
	        if (file) {
	            const reader = new FileReader();
	            reader.onload = function(e) {
	               $("#preview").attr("src", e.target.result).show();
	       		};
	        	reader.readAsDataURL(file);
	       	}
	    });
		 $("#carImgIVI").change(function() {
		        const file = this.files[0];
		        if (file) {
		            const reader = new FileReader();
		            reader.onload = function(e) {
		               $("#preview1").attr("src", e.target.result).show();
		       		};
		        	reader.readAsDataURL(file);
		       	}
		    });
		 $("#frontFender").change(function() {
		        const file = this.files[0];
		        if (file) {
		            const reader = new FileReader();
		            reader.onload = function(e) {
		               $("#preview2").attr("src", e.target.result).show();
		       		};
		        	reader.readAsDataURL(file);
		       	}
		    });
		 $("#carImgAc").change(function() {
		        const file = this.files[0];
		        if (file) {
		            const reader = new FileReader();
		            reader.onload = function(e) {
		               $("#preview3").attr("src", e.target.result).show();
		       		};
		        	reader.readAsDataURL(file);
		       	}
		    });
		 $("#carImgMph").change(function() {
		        const file = this.files[0];
		        if (file) {
		            const reader = new FileReader();
		            reader.onload = function(e) {
		               $("#preview4").attr("src", e.target.result).show();
		       		};
		        	reader.readAsDataURL(file);
		       	}
		    });
		 $("#carImgAudio").change(function() {
		        const file = this.files[0];
		        if (file) {
		            const reader = new FileReader();
		            reader.onload = function(e) {
		               $("#preview5").attr("src", e.target.result).show();
		       		};
		        	reader.readAsDataURL(file);
		       	}
		    });
		 $("#carImgSeat").change(function() {
		        const file = this.files[0];
		        if (file) {
		            const reader = new FileReader();
		            reader.onload = function(e) {
		               $("#preview6").attr("src", e.target.result).show();
		       		};
		        	reader.readAsDataURL(file);
		       	}
		    });
		 $("#carImgSunroof").change(function() {
		        const file = this.files[0];
		        if (file) {
		            const reader = new FileReader();
		            reader.onload = function(e) {
		               $("#preview7").attr("src", e.target.result).show();
		       		};
		        	reader.readAsDataURL(file);
		       	}
		    });
	}
	function addcarimgs(){
		const form = document.getElementById('carimgsform');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url:"addcarimgs.do",
            type:"POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
            	  
            }
        });
        closeModal();
	}
	//图片详情分页导航
	function carimgPageBar(page){
		let pageBar = $("#pageBar");
		let nagigatorNum = page.nagigatorNum;
		pageBar.empty();
		let first = "<a href='#' onclick='carimg(1)'>首页</a>"
		pageBar.append(first);
		if(page.hasPrev){
			pageBar.append("<a href='#' style='width:60px' onclick='carimg("+(currertaPage-1) +")'>上一页</a>");
		}
		for(let i = 0;i<nagigatorNum.length;i++){
			let num = nagigatorNum[i];
			if(num == page.pageNum){
				pageBar.append('<a href="#" onclick="carimg('+num+')">'+num+'</a>');
			}else{
				pageBar.append('<a href="#" onclick="carimg('+num+')">'+num+'</a>');
			}
		}
		if(page.hasNext){
			pageBar.append("<a href='#' style='width:60px' onclick='carimg("+(currertaPage+1) +")'>下一页</a>");
		}
		let lest = "<a href='#' onclick='carimg("+page.totalPages+")'>尾页</a>"
		pageBar.append(lest);
	};
	//客户车辆
	function mycar(pageNum=1){
		$("#content-area").empty();
		let pageSize=10;
		$.ajax({
			url:"mycarsAll.do",
			type:"GET",
			data:{
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let mycars = data.data.data;
				currertaPage = data.data.pageNum;
				var table =`
					<div class="table-container">
           			<div class="card-header">
           				<h3>客户车辆</h3>
           				<button class="action-btns" onclick="mycar(1)">刷新列表</button>
           				<button class="action-btn" onclick="addmycar()">添加车辆</button>
           			</div>
           			<table>
           				<thead>
           					<tr>
           						<td>id</td>
           						<td>车名</td>
           						<td>车辆车牌</td>
           						<td>公里数</td>
           						<td>提车时间</td>
           						<td></td>
           						<td>用户id</td>
           						<td>车辆id</td>
           						<td>图片</td>
           						<td>操作</td>
           					</tr>
           				</thead>
           				<tbody id="tr">
           					
           				</tbody>
           			</table>
           			<div id="pageBar">
           			</div>
           			<div id="myModal" class="modal">
       		  			
       				</div>
                </div>   
            </div>
				`
			$("#content-area").append(table);
				for(let i = 0;i<mycars.length;i++){
					let mycar = mycars[i];   
					let tr = `
						<tr>
						<td>${"${mycar.myCarId}"}</td>
						<td>${"${mycar.myCarName}"}</td>
						<td>${"${mycar.myCarNum}"}</td>
						<td>${"${mycar.myCarMileage}"}</td>
						<td>${"${mycar.myCarDate}"}</td>
						<td>${"${mycar.myCarMaint}"}</td>
						<td>${"${mycar.userId}"}</td>
						<td>${"${mycar.carId}"}</td>
						<td><img src='${"${mycar.myCarImg}"}' class="headimgs"></td>
						<td>
							<a href='#' onclick='mycarModal(${"${mycar.myCarId}"})' id="revise">修改<a>
							<a href='#' onclick='deletmycar(${"${mycar.myCarId}"})' id="delete">删除<a>
						</td>
						</tr>
						`
					$("#tr").append(tr);
	            };	
	            mycarPageBar(data.data)
			}
		})
	}
	function deletmycar(id){
		$.ajax({
			url:"deletmycar.do",
			type:"GET",
			data:{
				id:id
			},
			success:function(data){
				if(data.code == 200){
					alert("删除成功");
				}
				if(data.code == 409){
					alert("删除失败");
				}
				mycar(1);
			}
			
		})
	}
	function mycarModal(id){
		$("#myModal").empty();
		$.ajax({
			url:"mycarselectiddo",
			type:"GET",
			data:{
				id:id
			},
			success:function(data){
				let mycar = data.data;
					let form=`
						<div class="modal-content">
	   		    		<span class="close" onclick="closeModal()">&times;</span>
	   		    		<h2>修改信息</h2><br><br>
	   		    		<!-- 表单内容 -->
	   		    		<form id="mycarform" enctype="multipart/form-data">
   		    				<input type="text" name="id" value=${"${mycar.myCarId}"} style="display:none">
   		    				车辆id:<input type="text" name="myCarName" value=${"${mycar.myCarName}"}><br>
   		    				车辆车牌:<input type="text" name="myCarNum" value=${"${mycar.myCarNum}"}><br>
   		    				公里数:<input type="text" name="myCarMileage" value=${"${mycar.myCarMileage}"}><br>
   		    				提车时间:<input type="date" name="myCarDate"value=${"${mycar.myCarDate}"}><br>
   		    				:<input type="text" name="myCarMaint"value=${"${mycar.myCarMaint}"}><br>
   		    				用户id:<input type="text" name="userId"value=${"${mycar.userId}"}><br>
   		    				车辆id:<input type="text" name="carId"value=${"${mycar.carId}"}><br>
   		    				图片:<input type="file" name="myCarImg"value=${"${mycar.myCarImg}"}><br>
   		    					<img src=${"${mycar.myCarImg}"} id="prewimage"><br>
   		    				<button type="button" onclick="updatamycar()">修改</button>
   		    			</form>
	   		  			</div>
					`
				$("#myModal").append(form);
			}
		})
		document.getElementById('myModal').style.display = 'block';
	}
	function updatamycar(){
		const form = document.getElementById('mycarform');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url:"updatemycardo",
            type:"POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
            	  
            }
        });
        closeModal();
	}
	function addmycar(){
		$("#myModal").empty();
		let form=`
			<div class="modal-content">
	    		<span class="close" onclick="closeModal()">&times;</span>
	    		<h2>修改信息</h2><br><br>
	    		<!-- 表单内容 -->
	    		<form id="mycarforms" enctype="multipart/form-data">
   					车辆id:<input type="text" name="myCarName" ><br>
   					车辆车牌:<input type="text" name="myCarNum" ><br>
   					公里数:<input type="text" name="myCarMileage" ><br>
   					提车时间:<input type="date" name="myCarDate"><br>
   					:<input type="text" name="myCarMaint"><br>
   					用户id:<input type="text" name="userId"><br>
   					车辆id:<input type="text" name="carId"><br>
   					图片:<input type="file" id="myCarImg" name="myCarImg"><br>
   					<img id="preview" src="#" alt="头像预览" style="display:none; max-width:100px;"><br>
   					<button type="button" onclick="addcardetailss()">添加</button>
   				</form>
	  			</div>
		`
		$("#myModal").append(form);
		document.getElementById('myModal').style.display = 'block';
		// 图片预览功能
		$("#myCarImg").change(function() {
     	const file = this.files[0];
     	if (file) {
         	const reader = new FileReader();
         	reader.onload = function(e) {
             	$("#preview").attr("src", e.target.result).show();
         	}
         reader.readAsDataURL(file);
     	}
		})
	}
	function addcardetailss(){
		const form = document.getElementById('mycarforms');
	    const formData = new FormData(form);
        // 上传文件
        $.ajax({
            url:"addMycarform.do",
            type:"POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
            	  
            }
        });
        closeModal();
	}
	//用户车辆分页导航
	function mycarPageBar(page){
		let pageBar = $("#pageBar");
		let nagigatorNum = page.nagigatorNum;
		pageBar.empty();
		let first = "<a href='#' onclick='cardetails(1)'>首页</a>"
		pageBar.append(first);
		if(page.hasPrev){
			pageBar.append("<a href='#' style='width:60px' onclick='cardetails("+(currertaPage-1) +")'>上一页</a>");
		}
		for(let i = 0;i<nagigatorNum.length;i++){
			let num = nagigatorNum[i];
			if(num == page.pageNum){
				pageBar.append('<a href="#" onclick="cardetails('+num+')">'+num+'</a>');
			}else{
				pageBar.append('<a href="#" onclick="cardetails('+num+')">'+num+'</a>');
			}
		}
		if(page.hasNext){
			pageBar.append("<a href='#' style='width:60px' onclick='cardetails("+(currertaPage+1) +")'>下一页</a>");
		}
		let lest = "<a href='#' onclick='cardetails("+page.totalPages+")'>尾页</a>"
		pageBar.append(lest);
	};
	function closeModal(){
		document.getElementById('myModal').style.display = 'none';
	}
</script>
</html>